<style>
  .coupon_box_2 {
    display:inline-block; float:left;border:1px solid #808080ba;width:212px;height:94px;position: relative;padding:8px 10px;margin:10px 10px
  }
  .coupon_box_2:hover {
    cursor:pointer;
  }
  .coupon_num_style{
    position: absolute;left: 35%;bottom: -22px;
  }
</style>
<template>
  <div>
    <el-row :gutter="15">
      <CashModal :visible.sync="isShowCashModal"
                  :totalMoney="totalMoney" :newBankList="newBankList" :defaultCard="defaultCard" @refresh="getTotalMoney"></CashModal>
      <LogListModal :visible.sync="isShowLogDetail" :currentId="currentId"></LogListModal>
      <PutMoneyModal :visible.sync="isShowPutMoneyModal" :totalMoney="totalMoney"></PutMoneyModal>
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span>钱包余额</span>
          </div>
          <el-row>
            <el-col :span="5" :offset="5">
              <p style="text-align:center;"><span class="font-red" style="display:inline-block; width:300px; font-size: 38px;">{{totalMoney |decimalNumFilter}} <span style="font-size:14px;color:black">元</span></span></p>
              <el-row style="width:100%;height:40px;text-align: center;position:relative;">
                <el-col :span="6">
                  <!--后台配置为false，或者 余额为0时，禁用-->
                  <el-tooltip :content=elContent :disabled="!elContent" placement="bottom" effect="light">
                    <span>
                     <el-button :disabled="GET_GLOBAL_CONFIG('withdrawalPC') === false || Boolean(totalMoney) === false"
                                style="position:relative;left:0px;top:0px;" type="primary" class="btn btn-primary green"
                                @click="subMoney()" v-if="showTiXian">提现</el-button> <!--菜单无权限时隐藏-->
                    </span>
                  </el-tooltip>
                </el-col>
                <el-col :span="6">
                  <el-button  style="position:relative;left:156px;top:0px;" type="success" class="btn btn-primary green" @click="putMoney()"> 充值</el-button>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span>钱包管理</span>
          </div>
          <el-row>
            <el-col :span="8" :offset="8">
              <!--<p width="40%" style="text-align: center"><span class="font-red" style="font-size: 38px">{{totalMoney |decimalNumFilter}}</span>元</p>-->
              <!--<div style="text-align:right;position:relative"><span class="font-red" style="font-size: 38px;">{{totalMoney |decimalNumFilter}}</span><span style="position:absolute;top:17px;right:-40px">元</span></div>-->
              <p style="text-align: center">
                <el-button type="primary" class="btn btn-primary btn-lg green ladda-button" data-style="zoom-out" @click="showBankCardIndex($event)"> 银行卡</el-button>
              </p>
              <p style="text-align: center">
                <el-button type="primary" class="btn btn-primary btn-lg green ladda-button" data-style="zoom-out" @click="setPsw()">钱包密码</el-button>
              </p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="margin:10px 0;">
      <Portlet title="我的账单" style="position:relative;" class="wallet_show">
        <el-row>
          <el-col :span="24">
            <el-table
              :data="tableData"
              style="width: 100%"
              stripe>
              <el-table-column
                align="center">
                <template slot-scope="scope">
                  <span style="font-weight: 700; font-size: 20px;">{{scope.row.runningNo}}</span>
                  <span style="display:inline-block; width:100%">{{scope.row.foundtime | unixTimestampFilter}}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="left"
                prop="businessTypes">
                <template slot-scope="scope">
                  <span ><span style="font-weight: 700; font-size: 20px;">{{scope.row.runningTypeCode | filterDataBaseDictionary}}</span> <span v-if="scope.row.way">({{scope.row.way}})</span> </span>
                  <span style="display:inline-block; width:100%">{{scope.row.tradingObjectName}} <span v-if="scope.row.tradingObjectName">:</span>{{scope.row.tradingObjectNum}}</span>
                  <!--<p style="margin-left: 10px">(？？银行名？尾号)</p>-->
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="workerName">
                <template slot-scope="scope">
                  <span style="font-weight: 700; font-size: 20px;"> {{(scope.row.in_out == 2) ? '-' : '+' }} {{ scope.row.money }} </span>
                  <span style="display:inline-block; width:100%" v-if="scope.row.serviceFee">手续费：{{scope.row.serviceFee}}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="memo">
              </el-table-column>
              <el-table-column
                align="center">
                <template slot-scope="scope">
                  <a href="javascript:;"  style="color: #26a1ab;"
                     @click="showDetail(scope.row.runingId)">详情</a>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="24" style="margin-top:15px;">
            <Pagination class="pull-right" :total-item="totalItem" @sizeChange="setSizeChange" @pagination="page"  :perItem="params.pageSize"></Pagination>
          </el-col>
        </el-row>
        <div style="position:absolute;top:18px;right:10px;">
          <span class="pull-right"><a href="javascript:void(0);" class="blue-color" @click="showLogList">查看所有账单>></a></span>
        </div>
      </Portlet>

      <el-card>
        <div slot="header" class="clearfix">
          <span>我的优惠券</span>
          <span class="pull-right"><a href="javascript:void(0);" class="blue-color" @click="showCouponList">查看所有优惠券>></a></span>
          <el-row :gutter="10">
            <!--<el-col :span="5">-->
              <!--<div style="width:220px;height:100px;background-color: rebeccapurple"></div>-->
            <!--</el-col>-->
            <div class="coupon_box_2" v-for="(item, index) of couponArr" :key="index"
                 @click="showCouponDetail(item)"
                 :style="{'background': 'url(/api/ms-mongodb/file/download?fileId=' + item.couponsPic + ')', 'background-size': 'cover', 'background-repeat': 'no-repeat'}" >
              <span class="coupon_num_style"> x {{item.num}} 张</span>
            </div>
          </el-row>
        </div>
      </el-card>
    </el-row>
  </div>
</template>
<script>
// import {copy, confirm, dotData} from '@/utils'
import LogListModal from '@/views/fhb/myWallet/LogListModal'
import PutMoneyModal from '@/views/fhb/myWallet/PutMoneyModal'
import CashModal from '@/views/fhb/myWallet/CashModal'
import Pagination from '@/components/Pagination'
import {filterDataBaseDictionary, decimalNumFilter, hasOperation} from '@/filters'
import {dotData} from '@/utils'
import {mapGetters} from 'vuex'
export default {
  name: 'myWalletIndex',
  components: {
    PutMoneyModal,
    CashModal,
    LogListModal,
    Pagination
  },
  data() {
    return {
      isFasle: false,
      isShowLogDetail: false,
      isShowCashModal: false,
      isShowPutMoneyModal: false,
      currentId: '',
      hasBankCard: 0, // 默认 未绑卡
      totalMoney: 0, // 模拟余额为 100元
      isShow: true,
      totalItem: 0,
      params: {
        pageSize: 10,
        pageNum: 1
      },
      tableData: [],
      bankCardArr: [], // 银行卡列表
      newBankList: [], // 带尾号的银行卡列表
      defaultCard: '',
      //  userData: {},
      userId: '',
      couponArr: [] // 有效优惠券列表
    }
  },
  filter: {
    decimalNumFilter
  },
  created() {
    // 钱包余额
    this.getTotalMoney()
    // 提现之前：检查是否 已绑卡httpGetResponse
    this.$ajax.get('/ms-user-wallet/wallet/wallet-validation').then(response => {
      if (dotData(response, 'success')) {
        this.hasBankCard = dotData(response, 'data.isBank')
        console.log('提现之前是否绑有卡', this.hasBankCard)
      }
    })
    // 请求银行卡列表--构建新的银行卡列表, 只请求数组不需要分页效果
    this.$ajax.table('/ms-user-wallet/wallet/walletBanksList').then(response => {
      const success = dotData(response, 'success')
      if (success) {
        this.bankCardArr = dotData(response, 'data')
        // this.bankCardArr = data
        console.log('未处理的银行卡列表bankCardArr', this.bankCardArr)
        let temp = []
        if (Array.isArray(this.bankCardArr)) {
          this.bankCardArr.forEach(v => {
            if (v.isDefault === 1) {
              this.defaultCard = v.id
            }
            temp.push({value: v.id, text: filterDataBaseDictionary(v.bankTypeCode) + '(尾号' + (v.cardNo).substr(v.cardNo.length - 3) + ')'})
          })
        }
        this.newBankList = temp
        console.log('处理后的银行卡列表', this.newBankList)
        console.log('默认的哪张银行卡', this.defaultCard)
      }
    })
    // 钱包流水
    this.getLogList()
    // 有效优惠券列表
    this.getCouponList()
  },
  computed: {
    showTiXian() {
      let _var = hasOperation('tixian')
      return _var
    },
    elContent() {
      if (this.GET_GLOBAL_CONFIG('withdrawalPC') === false) {
        return '维护中，请稍后再试！'
      }
      if (Boolean(this.totalMoney) === false) {
        return '钱包余额为0，不能提现！！'
      }
    },
    ...mapGetters(['GET_GLOBAL_CONFIG'])
  },
  methods: {
    filterDataBaseDictionary,
    // 余额：httpGetResponse
    getTotalMoney() {
      // 获取钱包余额
      this.$ajax.get('/ms-user-wallet/wallet/home-page').then(response => {
        let success = dotData(response, 'success')
        if (success) {
          this.totalMoney = dotData(response, 'data.balance')
        }
      })
    },
    // 钱包流水
    getLogList() {
      this.$ajax.table('/ms-user-wallet/wallet/wallet-bill-running-log-list', this.params).then(response => {
        const success = dotData(response, 'success')
        if (success) {
          this.totalItem = dotData(response, 'totalItem')
          this.tableData = dotData(response, 'data')
        }
      })
    },
    //  分页
    page(number) {
      this.params.pageNum = number
      this.getLogList()
    },
    setSizeChange(size) {
      this.params.pageSize = size
      this.getLogList()
    },
    // show提现
    subMoney() {
      if (this.hasBankCard === 0) {
        alert('您还没有绑定银行卡，请先绑定银行卡在提现。')
      } else {
        if (!this.totalMoney) { return }
        this.getTotalMoney() // 实时请求出最新的余额
        this.isShowCashModal = true // show modal
      }
    },
    showBankCardIndex() {
      this.$router.push({path: '/ss-fhb/myWallet/bankCardIndex'})
    },
    setPsw() {
      this.$router.push({path: '/ss-fhb/myWallet/setPsdShow'})
    },
    showLogList() {
      this.$router.push({path: '/ss-fhb/my-wallet/log-list'})
    },
    showDetail(rowId) {
      console.log('传之前的id', rowId)
      this.currentId = rowId
      this.isShowLogDetail = true
    },
    putMoney() {
      this.isShowPutMoneyModal = true
    },
    showCouponList() {
      this.$router.push({path: '/ss-fhb/my-wallet/couponList'})
    },
    getCouponList() {
      this.$ajax.get('/ms-fahuobao-user/wallet/get-coupons', {state: '1'}).then(response => {
        if (response.success) {
          this.couponArr = response.data
        }
        console.log('有效劵列表 juan list------- this.couponArr', this.couponArr)
      })
    },
    // 进入该劵详情
    showCouponDetail(data) {
      console.log('data-----', data)
      this.$router.push({path: '/ss-fhb/my-wallet/coupon-show/' + data.couponsConfigId})
    }
  }
}
</script>
